import Bubble from './components/Bubble';

const ParentComponent: React.FC = () => {
  const initialBubbles = [
    {
      text: '面试无忧，ai陪伴',
      color: '#F5D94D',
      left: 420,
    },
    {
      text: '轻松助力求职',
      color: '#CD4DF5',
      left: 120,
    },
    {
      text: '高效面试，AI准备',
      color: '#F5574D',
      left: 0,
    },
    {
      text: '新建模拟面试',
      color: '#417FEA',
      left: 360,
    },
    {
      text: '智能面试，提升效率',
      color: '#F5D94D',
      left: 460,
    },
    {
      text: '让面试更从容无忧，精准评估你的潜力！',
      color: '#F5B84D',
      left: 260,
    },
  ];

  return (
    <div className="mx-auto flex h-full w-1/2 flex-col items-center justify-center">
      {initialBubbles.map((pos, index) => (
        <div className="w-full" key={index}>
          <Bubble color={pos.color} left={pos.left}>
            {pos.text}
          </Bubble>
        </div>
      ))}
    </div>
  );
};

export default ParentComponent;
